import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Home, Mic, Settings, QrCode } from 'lucide-react'
import { useDeviceStore } from '../stores/deviceStore'
import { useSocketStore } from '../stores/socketStore'

interface NavLinkProps {
  to: string;
  icon: React.ReactNode;
  label: string;
  currentPath: string;
}

const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, currentPath }) => {
  const isActive = currentPath === to
  return (
    <Link 
      to={to} 
      className={`flex flex-col items-center justify-center w-full py-2 transition-colors ${
        isActive ? 'text-blue-500' : 'text-gray-500 hover:text-blue-500'
      }`}
    >
      {icon}
      <span className="text-xs mt-1">{label}</span>
    </Link>
  )
}

const Header: React.FC = () => {
  const location = useLocation()
  const { pairedDevices } = useDeviceStore()
  const { isConnected } = useSocketStore()

  const isPaired = pairedDevices.length > 0

  if (['/pairing', '/settings'].includes(location.pathname)) {
    return null // 在特定页面不显示Header
  }

  return (
    <header className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-t-md z-50">
      <nav className="max-w-md mx-auto flex justify-around">
        <NavLink 
          to="/" 
          icon={<Home className="w-6 h-6" />} 
          label="主页" 
          currentPath={location.pathname}
        />
        
        <div className="relative flex items-center">
          <Link
            to="/voice"
            className={`flex items-center justify-center w-16 h-16 -mt-6 rounded-full shadow-lg transition-all
              ${isPaired && isConnected ? 'bg-blue-500 hover:bg-blue-600' : 'bg-gray-400 cursor-not-allowed'}
            `}
          >
            <Mic className="w-8 h-8 text-white" />
          </Link>
        </div>

        <NavLink 
          to="/settings" 
          icon={<Settings className="w-6 h-6" />} 
          label="设置" 
          currentPath={location.pathname}
        />
      </nav>
    </header>
  )
}

export default Header 